<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <style>
        tr {
            vertical-align: middle;
            text-align: center;
        }
    </style>

</head>
<!-- 主体区域 -->
<div class="container mt-5">
    <h4>就诊人管理</h4>
    <hr>
    <!-- 就诊人信息 -->
    <div class="mb-3 d-flex justify-content-start">
        <!-- 查询 -->
        <form class="row gx-3 gy-2 align-items-center">
            <div class="col-6">
                <label class="visually-hidden" for="specificSizeInputName">输入姓名查找</label>
                <input type="text" class="form-control" id="nameVal" placeholder="输入姓名查找">
            </div>
            <div class="col-6">
                <input type="button" value="查找" class="btn btn-primary searchbtn">
            </div>
        </form>
    </div>
    <!-- 就诊人信息列表 -->
    <h4>就诊人信息列表</h4>
    <div class="col-12">
        <table class="table table-bordered">
            <thead id="thead_">
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">姓名</th>
                    <th scope="col">身份证号</th>
                </tr>
            </thead>
            <tbody class="patient-list">
                <tr>
                    <td scope="col">测试id</td>
                    <td scope="col">测试name</td>
                    <td scope="col">测试idcard73286711111</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
    select();
    // 按照姓名查询
    $('.searchbtn').click(() => {
        $.ajax({
            method: 'get',
            url: 'http://localhost:3000/patient/selectbyname',
            data: {
                "name": $('#nameVal').val(),
            },
            success: function (data) {
                render(data.data)
            },
            error: function (e) {
                console.log(JSON.stringify(e));
            }
        })

    })
    // 查询所有数据
    function select() {
        $.ajax({
            method: 'get',
            url: 'http://localhost:3000/patient/select',
            success: function (data) {
                render(data.data)
            },
            error: function (e) {
                console.log(JSON.stringify(e));
            }
        })
    }
    // 渲染
    function render(data) {
        let str = ''
        data.forEach((item, index) => {
            str += `<tr>
                    <td scope="col">${item.id}</td>
                    <td scope="col">${item.name}</td>
                    <td scope="col">${item.idcard}</td>
                </tr>`
        })
        $('.patient-list').html(str)
    }


</script>

<body>

</body>

</html>